<template>
  <div class="box">
    8888
    <div class="top">
      <div class="point_box" :class="{point_box2:screenWidth < 1920,dark_point_box:isDark}">
        <div class="point_box_left">
          <div class="title">安全生产已达 {{topData.safetyDays}} 天</div>
          <div class="search_box">
            <el-input v-model="input" style="width: 76%;height:2.1875rem;" prefix-icon="Search" placeholder="请输入关键词" />
            <el-button type="primary" class="globalFontSize" style="width: 22%;height:2.1875rem;">查询</el-button>
          </div>
        </div>
        <div class="data_show globalFontSize">
          <div class="items">
            <img src="@/assets/images/home/实时测点.svg" alt="">
            <div class="items_num">
              <div>实时测点</div>
              <div style="font-size:1.75rem;font-weight:700;color:#0a9dff;" :style="{fontSize:(pagesStore.sizeNum * 2) + 'px'}">{{topData.pointNum}}</div>
            </div>
          </div>
          <div class="items">
            <img src="@/assets/images/home/测点断电.svg" alt="">
            <div class="items_num">
              <div>测点断电</div>
              <div style="font-size:1.75rem;font-weight:700;color:#ff5555;" :style="{fontSize:(pagesStore.sizeNum * 2) + 'px'}">{{topData.realCutNum}}</div>
            </div>
          </div>
          <div class="items">
            <img src="@/assets/images/home/测点断线.svg" alt="">
            <div class="items_num">
              <div>测点断线</div>
              <div style="font-size:1.75rem;font-weight:700;color:#ff5555;" :style="{fontSize:(pagesStore.sizeNum * 2) + 'px'}">{{topData.realBrokenNum}}</div>
            </div>
          </div>
          <div class="items">
            <img src="@/assets/images/home/测点报警.svg" alt="">
            <div class="items_num">
              <div>测点报警</div>
              <div style="font-size:1.75rem;font-weight:700;color:#ff5555;" :style="{fontSize:(pagesStore.sizeNum * 2) + 'px'}">{{topData.realAlarmNum}}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="quick" :class="{qeuick2:screenWidth < 1920,dark_quick:isDark}">
        <div class="quick_head">
          <div class="title" :style="{fontSize:(pagesStore.sizeNum + 2) + 'px'}">
            <img src="@/assets/images/图标.svg" alt="">
            <div>常用</div>
          </div>
          <img src="@/assets/images/home/设置.svg" alt="">
        </div>
        <div class="quick_box">
          <div class="items globalFontSize"> 
            <div class="img">
              <img src="@/assets/images/home/历史断电.svg" alt="">
            </div>
            <div>历史断电</div>
          </div>
          <div class="items globalFontSize"> 
            <div class="img">
              <img src="@/assets/images/home/历史断线.svg" alt="">
            </div>
            <div>历史断线</div>
          </div>
          <div class="items globalFontSize"> 
            <div class="img">
              <img src="@/assets/images/home/历史报警.svg" alt="">
            </div>
            <div>历史报警</div>
          </div>
          <div class="items globalFontSize"> 
            <div class="img">
              <img src="@/assets/images/home/历史断电.svg" alt="">
            </div>
            <div>历史断电</div>
          </div>
          <div class="items globalFontSize" v-if="screenWidth >= 1920"> 
            <div class="img">
              <img src="@/assets/images/home/历史断电.svg" alt="">
            </div>
            <div>历史断电</div>
          </div>
          <div class="items globalFontSize" v-if="screenWidth >= 1920"> 
            <div class="img">
              <img src="@/assets/images/home/历史断电.svg" alt="">
            </div>
            <div>历史断电</div>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom" :class="{dark_bottom:isDark}">
      <div class="substation" :class="{substation2:screenWidth < 1920}">
        <div class="substation_head">
          <div class="title" :style="{fontSize:(pagesStore.sizeNum + 2) + 'px'}">
            <img src="@/assets/images/图标.svg" alt="">
            <div>分站</div>
            <div style="font-size:.875rem;font-weight:400;" :style="{fontSize:pagesStore.sizeNum + 'px'}">共 351 条记录</div>
          </div>
          <img src="@/assets/images/home/展开菜单.svg" alt="">
        </div>
        <div class="line"></div>
        <div class="select_box">
          <el-select v-model="value" placeholder="请选择" style="width: 100%">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="table">
          <el-table :data="tableData" border class="tableFontSize" cell-class-name="cellBorder" header-row-class-name="header" header-cell-class-name="header" row-class-name="rowHeight" stripe style="width: 100%;height:calc(100%);" :header-row-style="{ backgroundColor:isDark?'#2b5477':'#e3effe' }">
            <el-table-column type="index" label="编号"/>
            <el-table-column show-overflow-tooltip prop="address" label="安装地点"/>
            <el-table-column show-overflow-tooltip prop="work" label="工作状态" />
            <el-table-column show-overflow-tooltip prop="pipei" label="匹配状态" />
          </el-table>
        </div>

      </div>
      <div class="pointInfo" :class="{pointInfo2:screenWidth < 1920}">
        <div class="pointInfo_head">
          <div class="title" :style="{fontSize:(pagesStore.sizeNum + 2) + 'px'}">
            <img src="@/assets/images/图标.svg" alt="">
            <div>测点信息（高架二部皮带机）</div>
          </div>
          <div class="btns globalFontSize">
            <div class="btn_item" style="width:3.75rem;">全部</div>
            <div class="btn_item">模拟量</div>
            <div class="btn_item">开关量</div>
            <div class="btn_item">累计量</div>
          </div>
          <div class="imgs">
            <img v-if="!isDark" src="@/assets/images/home/历史记录.svg" alt="" style="margin:0 1rem 0 0;">
            <img v-if="isDark" src="@/assets/images/home/历史记录2.svg" alt="" style="margin:0 1rem 0 0;">
            <img v-if="!isDark" src="@/assets/images/home/搜索.svg" alt="" style="margin: 0;">
            <img v-if="isDark" src="@/assets/images/home/搜索2.svg" alt="" style="margin: 0;">
          </div>
        </div>
        <div class="line" style="margin:0 0 .625rem 0;"></div>
        <div class="pointInfo_box">
          <el-table :data="tableData" border stripe row-class-name="rowHeight" cell-class-name="cellBorder" header-row-class-name="header" header-cell-class-name="header" class="table tableFontSize" :header-row-style="{ backgroundColor:isDark?'#2b5477':'#e3effe' }" >
            <el-table-column type="index" label="编号"/>
            <el-table-column show-overflow-tooltip prop="address" label="安装地点"/>
            <el-table-column show-overflow-tooltip prop="work" label="工作状态" />
            <el-table-column show-overflow-tooltip prop="pipei" label="匹配状态" />
            <el-table-column show-overflow-tooltip prop="pipei" label="匹配状态" />
            <el-table-column show-overflow-tooltip prop="pipei" label="匹配状态" />
            <el-table-column show-overflow-tooltip prop="pipei" label="匹配状态" />
          </el-table>
        </div>
        <el-pagination
          class="pages globalFontSize"
          v-model:current-page="currentPage4"
          v-model:page-size="pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="400"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
      <div class="output" :class="{output2:screenWidth < 1920}">
        <div class="output_head">
          <div class="title" :style="{fontSize:(pagesStore.sizeNum + 2) + 'px'}">
            <img src="@/assets/images/图标.svg" alt="">
            <div>输出设备</div>
          </div>
        </div>
        <div class="line"></div>
        <div class="output_box">
          <div class="items globalFontSize">
            <div class="items_name">
              <div>002C05</div>
              <div class="state"><div class="point"></div>在线</div>
            </div>
            <div class="location">
              <div class="l_titile">
                <img src="@/assets/images/home/位置.svg" alt="">
                安装地点
              </div>
              <div class="l_info" title="总回风测风站总回测风站总回总回测
                总回风测风站总回测风站总回总回测">
                总回风测风站总回测风站总回总回测
                总回风测风站总回测风站总回总回测
              </div>
            </div>
          </div>
          <div class="items globalFontSize">
            <div class="items_name">
              <div>002C05</div>
              <div class="state"><div class="point"></div>在线</div>
            </div>
            <div class="location">
              <div class="l_titile">
                <img src="@/assets/images/home/位置.svg" alt="">
                安装地点
              </div>
              <div class="l_info" title="总回风测风站总回测风站总回总回测
                总回风测风站总回测风站总回总回测">
                总回风测风站总回测风站总回总回测
                总回风测风站总回测风站总回总回测
              </div>
            </div>
          </div>
          <div class="items globalFontSize">
            <div class="items_name">
              <div>002C05</div>
              <div class="state"><div class="point"></div>在线</div>
            </div>
            <div class="location">
              <div class="l_titile">
                <img src="@/assets/images/home/位置.svg" alt="">
                安装地点
              </div>
              <div class="l_info" title="总回风测风站总回测风站总回总回测
                总回风测风站总回测风站总回总回测">
                总回风测风站总回测风站总回总回测
                总回风测风站总回测风站总回总回测
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import useSettingsStore from '@/store/modules/settings'
import { watch } from 'vue';
import axios from "@/utils/request"
import usePagesStore from '@/store/modules/pages'
const pagesStore = usePagesStore()

const storageSetting2 = JSON.parse(localStorage.getItem('layout-set'))
const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.isDark);

const tableData = [
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
  {
    address: '高架二部啊手动阀',
    work:'在线',
    pipei:'匹配'
  },
]
const topData = ref({})
// 获取当前屏幕的宽度
const screenWidth = ref(window.innerWidth);

const setClassName = () =>{
  if(isDark.value){
    return 'dark_table'
  }
}

// 获取首页顶部数据
const getHomeTop = () =>{
  topData.value = {
    safetyDays:0,
    pointNum:0,
    realCutNum:0,
    realBrokenNum:0,
    realAlarmNum:0,
  }
  // axios.get('/home/top').then(res => {
  //   topData.value = res.data
  // })
}

onMounted(() => {
  getHomeTop()
  window.addEventListener('resize', ()=>{
    // 获取当前屏幕的宽度
   screenWidth.value = window.innerWidth;
  });
  if(isDark.value){
    document.querySelector(':root').style.setProperty('--el-bg-color-overlay','#386c96');
    document.querySelector(':root').style.setProperty('--el-fill-color-light','#4e7299');
    document.querySelector(':root').style.setProperty('--el-text-color-regular','#fff');
  }else{
    document.querySelector(':root').style.setProperty('--el-bg-color-overlay','#fff');
    document.querySelector(':root').style.setProperty('--el-fill-color-light','#f5f7fa');
    document.querySelector(':root').style.setProperty('--el-text-color-regular','#606266');
  }
})
onBeforeUnmount(() => {
  window.addEventListener('resize', ()=>{ 
    // 获取当前屏幕的宽度
   screenWidth.value = window.innerWidth;
  });
  document.querySelector(':root').style.setProperty('--el-bg-color-overlay','#fff');
  document.querySelector(':root').style.setProperty('--el-fill-color-light','#f5f7fa');
  document.querySelector(':root').style.setProperty('--el-text-color-regular','#606266');
})
watch(()=>isDark.value,()=>{
  if(isDark.value){
    document.querySelector(':root').style.setProperty('--el-bg-color-overlay','#386c96');
    document.querySelector(':root').style.setProperty('--el-fill-color-light','#4e7299');
    document.querySelector(':root').style.setProperty('--el-text-color-regular','#fff');
  }else{
    document.querySelector(':root').style.setProperty('--el-bg-color-overlay','#fff');
    document.querySelector(':root').style.setProperty('--el-fill-color-light','#f5f7fa');
    document.querySelector(':root').style.setProperty('--el-text-color-regular','#606266');
  }
})

</script>
<style lang="scss" scoped>
@import "@/assets/styles/page-edit.scss";
.point_box2{
  width: 77.4% !important;
}
.qeuick2{
  width: 22% !important;
}
.table2{
  width: 100% !important; 
}
.pointInfo2{
  width: 56.5% !important;
}
.substation2{
  width: 22.5% !important; 
}
.output2{
  width: 19.7% !important;
}

// 深色样式
.dark_point_box{
  background: url('/src/assets/images/home/bg2.png') !important;
  .point_box_left .title{
    color: #fff !important;
  }
  .point_box_left .search_box{
    background: #355d7e !important;
  }
  ::v-deep .el-input__wrapper {
    background: #355d7e !important;
  }
  .items_num{
    color: #fff !important;
  }
}
.dark_quick{
  background: #476383 !important;
  .quick_head .title{
    color: #fff !important;
  }
  .quick_box .items{
    color: #fff !important;
    .img{
      background: #5287b5 !important;
    }
  }
}
.dark_bottom{
  .title{
    color: #fff !important;
  }
  .line{
    background-color: rgba(255, 255, 255, 0.1) !important;
  }
  .substation{
    background-color: #476383 !important;
    .select_box{
      color: #fff !important;
      ::v-deep .el-input__wrapper {
        background-color: #386c96 !important;
        box-shadow: none;
        .el-input__inner::-webkit-input-placeholder{
          color: #fff; // 初始化的文字颜色
        }
      }
    }
      // 设置行的背景颜色
    ::v-deep .el-table tr{
      background-color: #476383 !important;
    }
    ::v-deep .el-table__body tr:nth-child(even) {  
      background-color: #476383 !important; /* 偶数行（斑马线）的默认背景色 */  
    }
    ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
      background-color: #346288 !important;
    }
    ::v-deep .el-table tbody tr>td{
      color: #fff;
      border: none;
    }
    //自定义斑马线和鼠标移入样式
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even) > td {
      background-color: rgba(110, 185, 255, 0.18) !important;
    }
    ::v-deep .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd) > td {
       background-color: rgba(110, 185, 255, 0.18) !important;
    }
  }
  .pointInfo{
    background-color: #476383 !important;
    .pointInfo_head .btns{
      color: #fff !important;
    }
    .pointInfo_box{
        ::v-deep .el-table tr{
          background-color: #476383 !important;
        }
        ::v-deep .el-table__body tr:nth-child(even) {  
          background-color: #476383 !important; /* 偶数行（斑马线）的默认背景色 */  
        }
        ::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
          background-color: #346288 !important;
        }
        ::v-deep .el-table tbody tr>td{
          color: #fff;
          border: none;
        }
        //自定义斑马线和鼠标移入样式
        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even) > td {
          background-color: rgba(110, 185, 255, 0.18) !important;
        }
        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd) > td {
           background-color: rgba(110, 185, 255, 0.18) !important;
        }
    }
    .pages{
      ::v-deep .el-pagination__total{
        color: #fff ;
      }
      ::v-deep .el-pagination__jump {
        color: #fff ;
      }
      ::v-deep .el-input__wrapper {
        background-color: #386c96 !important;
        box-shadow: none;
        .el-input__inner{
          color: #fff ;
        }
      }
      ::v-deep .el-pager li {
        background: #325f85 !important;
        color: rgba(255, 255, 255, 0.65) !important;
      }
      ::v-deep .el-pager .is-active {
        background-color: #16c2f2 !important;
        color: #fff !important;
      }
      ::v-deep .btn-next{
        background: #325f85 !important;
        color: #fff !important;
      }
      ::v-deep .btn-prev{
        background: #325f85 !important;
        color: #fff !important;
      }
    }
  }
  .output{
    background-color: #476383 !important;
    .output_box .items{
      background-color: #30699b !important;
      .items_name{
        color: #fff !important;
      }
      .location{
        background-color: #285f8f !important;
        color: #fff !important;
      }
    }
  }
}

::v-deep .el-table .cell{
  padding: 0 !important;
  text-align: center;
  // background-color: #476383 !important;
  // color: #fff;
}
::v-deep .el-table__body tr:nth-child(even) {  
  background-color: #{$stripe-bg} !important; /* 偶数行（斑马线）的默认背景色 */  
  // background-color: #f0f3f9 !important; /* 偶数行（斑马线）的默认背景色 */  
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
  background-color: #{$stripe-bg} !important;
  // background-color: #f0f3f9 !important;
}

//自定义斑马线和鼠标移入样式
::v-deep .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even) > td {
  background-color: #e3effe !important;
}
::v-deep .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd) > td {
   background-color: #e3effe !important;
}


.box{
  padding: .75rem;
  width: 100%;
  height: 100%;
  overflow: auto;
  .top{
    width: 100%;
    height: 7.875rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    .point_box{
      padding: .75rem;
      width: 66.7%;
      height: 100%;
      border-radius: .5rem;
      background: url('/src/assets/images/home/bg.png');
      background-size: cover;
      display: flex;
      align-items: flex-end;
      .point_box_left{
        width: 27%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title{
          font-size: 1.5rem;
          color: rgba(55, 120, 204, 1);
          font-weight: 700;
        }
        .search_box{
          padding: .5625rem;
          width: 100%;
          height: 3.3125rem;
          border-radius: .375rem;
          background: linear-gradient(180deg, rgba(227, 236, 255, 1) 0%, rgba(255, 255, 255, 0.72) 100%);
          display: flex;
          justify-content: space-between;
        }
      }
      .data_show{
        margin: 0 0 0 2.375rem;
        width: 51.25rem;
        height: 5.1875rem;
        display: flex;
        justify-content: space-between;
        .items{
          width: 10.5625rem;
          height: 100%;
          display: flex;
          align-items: center;
          img{
            width: 5.1875rem;
            height: 5.1875rem;
          }
          .items_num{
            // font-size: .875rem;
            color: rgba(34, 68, 119, 1);
          }
        }
      }
    }
    .quick{
      padding: .75rem;
      width: 32.781%;
      height: 7.125rem;
      background-color: #f1f5fd;
      border-radius: .5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .quick_head{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title{
          font-size: 1rem;
          font-weight: 500;
          color: rgba(34, 68, 119, 1);
          display: flex;
          align-items: center;
          div{
            margin: 0 0 0 .25rem;
          }
        }
      }
      .quick_box{
        height: 3.5rem;
        display: flex;
        justify-content: space-between;
        .items{
          // width: 3.125rem;
          height: 3.5rem;
          font-size: .75rem;
          color: rgba(34, 68, 119, 1);
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: space-between;
          .img{
            width: 2rem;
            height: 2rem;
            background-color: #fff;
            border-radius: .375rem;
            display: flex;
            align-items: center;
            justify-content: center;
          }
        }
        .items:hover{
          cursor: pointer;
        }
      }
    }
  }
  .bottom{
    .title{
      font-size: 1rem;
      font-weight: 700;
      color: rgba(34, 68, 119, 1);
      display: flex;
      align-items: center;
      div{
        margin: 0 0 0 .25rem;
      }
    }
    .line{
      margin: .1875rem 0 .625rem 0;
      width: 100%;
      height: .0625rem;
      background-color: rgba(34, 68, 119, 0.1);
    }
    margin: .75rem 0 0 0;
    width: 100%;
    height: calc(100% - 8.625rem);
    display: flex;
    justify-content: space-between;
    // background: #000;
    .substation{
      width: 24.5%;
      height: 100%;
      background-color: #fff;
      border-radius: .5rem;
      .substation_head{
        padding:.75rem;
        display: flex;
        justify-content: space-between;
        .title{
          align-items: flex-end;
        }
      }
      .select_box{
        padding: 0 .8125rem;
        margin: 0 0 .75rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: .875rem;
        color: rgba(34, 68, 119, 1);
      }
      .table{
        padding:0 .75rem;
        height:calc(100% - 7.5rem);
        
      }
    }
    .pointInfo{
      width: 58.5%;
      height: 100%;
      background-color: #fff;
      border-radius: .5rem;
      position: relative;
      .pointInfo_head{
        padding: .5625rem .75rem;
        display: flex;
        justify-content: space-between;
        .btns{
          width: 20.4375rem;
          height: 1.875rem;
          font-size: .875rem;
          color: rgba(34, 68, 119, 1);
          display: flex;
          justify-content: space-between;
          .btn_item{
            width: 5.5rem;
            height: 1.875rem;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 3.125rem;
          }
        }
        .imgs{
          display: flex;
          align-items: center;
        }
        .btns:hover{
          cursor: pointer;
        }
      }
      .pointInfo_box{
        padding:0 .75rem;
        width: 100%;
        height: calc(100% - 8.75rem);
        display: flex;
        justify-content: space-between;
        .table{
          // width: 49.57%;
          height: 100%;
        }
      }
      .pages{
        position: absolute;
        bottom: 1.25rem;
        right: .625rem;
      }
    }
    .output{
      width: 15.7%;
      height: 100%;
      background-color: #fff;
      border-radius: .5rem;
      .output_head{
        padding: .75rem;
      }
      .output_box{
        padding: 0 .75rem;
        height: calc(100% - 4.5rem);
        overflow-y: auto;
        overflow-x: hidden;
        .items{
          padding: .5rem;
          margin: 0 0 .75rem 0;
          height: 7.75rem;
          background: #f3f7fe;
          border-radius: .375rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: .875rem;
          .items_name{
            // font-size: .875rem;
            color: rgba(34, 68, 119, 1);
            display: flex;
            justify-content: space-between;
            .state{
              // font-size: .75rem;
              color: rgba(0, 186, 173, 1);
              display: flex;
              align-items: center;
              .point{
                margin: 0 .25rem 0 0;
                width: .5rem;
                height: .5rem;
                border-radius: 50%;
                background: rgba(0, 186, 173, 1);
              }
            }
          }
          .location{
            padding: .75rem;
            width: 100%;
            height: 4.375rem;
            background-color: #fff;
            border-radius: .25rem;
            // font-size: .875rem;
            color: rgba(34, 68, 119, 1);
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            .l_titile{
              display: flex;
              align-items: center;
              img{
                margin-right: .25rem;
              }
            }
            .l_info{
              width: 100%;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }
          }
        }
      }
    }
  }
}

</style>